<template>
    <!-- Your template content here -->
</template>
  
<script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { MTLLoader } from 'three/addons/loaders/MTLLoader.js';
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';

// Scene, camera, and renderer setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Add an ambient light
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

// Add a directional light
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
scene.add(directionalLight);

// ... (other setup code)

const objPath = '../src/assets/3dmaxtest.obj';
const mtlPath = '../src/assets/3dmaxtest.mtl';

const mtlLoader = new MTLLoader();
const objLoader = new OBJLoader();

const loadMtl = new Promise((resolve, reject) => {
    mtlLoader.load(mtlPath, (materials) => {
        materials.preload();
        resolve(materials);
    }, undefined, reject);
});

const loadObj = loadMtl.then((materials) => {
    return new Promise((resolve, reject) => {
        objLoader.setMaterials(materials);
        objLoader.load(objPath, (object) => {
            resolve(object);
        }, undefined, reject);
    });
});

let loadedObject = null;

Promise.all([loadMtl, loadObj])
    .then(([materials, object]) => {
        loadedObject = object;
        scene.add(loadedObject);

        // Adjust the camera position and look at the loaded object
        camera.position.set(0, 0, 5);
        camera.lookAt(loadedObject.position);
    })
    .catch((error) => {
        console.error('加载模型出错：', error);
    });

const controls = new OrbitControls(camera, renderer.domElement);

function animate() {
    controls.update();
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();
</script>
  
<style lang="scss" scoped>
/* Your styles here */
</style>
  